﻿html {    
    height: 100%;
    margin: 0;
    padding: 0; 
    background-color: #efefef;
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

h1, h2, h3, p, a {    
    font-family: 'Open Sans Condensed';
    font-weight: lighter;
}

a{
    color: white;
    text-decoration: none;
}
a:hover {
    cursor: pointer;
}
input:focus {
    outline: none;
}
textarea:focus {
    outline: none;
}
select:focus {
    outline: none;
}
input:focus, textarea:focus, select:focus {
    outline: none;
}
:focus {
    outline: none;
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset, 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
}

/*LAYOUT*/
.floatingHeader {
    background-color: #efefef;
    position: fixed;
    width: inherit;
    max-width: 1100px;
    height: 80px;
    top: 140px;
    z-index: 499;
    display:block;
    text-align: center;
    border-right: 3px solid #efefef;
    
}

.floatingHeader > h1 { 
    font-size: 2em !important;   
    height: 70px;
    line-height: 35px;
    width: 100%;
    padding-top: 15px;
    margin-bottom: 0;
    display:inline-block;
    white-space: nowrap;
    overflow:hidden !important;
    text-overflow: ellipsis;
}

#layoutHeader > h2 > a{
    position: absolute;
    top: 5px;
    right: 15px;
    color: darkgray;
}

#layoutHeader > h2 > a:hover{
    color: #4bd9bf;
}

#layoutWrapper {
    position: relative;
    min-height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#layoutContent {
    overflow-y: hidden;
    width: 100%;
    min-width: 670px;
    padding-top: 170px;
    /*padding-bottom: 200px;*/
    margin: 0 auto;
}

#layoutHeader {
    background-color: #efefef;
    width: 100%;
    min-width: 550px;
    height: 149px;
    position: fixed;
    top: 0;
    z-index: 500;
    display:block;
}

.formDesignDiv {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    /*padding-bottom: 130px;*/
}

#layoutHeader #section1 {
    width: 750px;
    height: 70px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    position:relative;
}

#layoutHeader #section1 h1 {
    font-family: 'Open Sans Condensed';
    font-size: 90px;
    color: white;
    font-weight: lighter;
    margin: 0px;
    line-height: 90px;
    position: absolute;
    bottom: 0;
    left: 0;    

    text-shadow: 1px 1px 0px lightgray, 2px 2px 0px lightgray, 3px 3px 0px lightgray;
    -moz-text-shadow: 1px 1px 0px lightgray, 2px 2px 0px lightgray, 3px 3px 0px lightgray;
    -web-text-shadow: 1px 1px 0px lightgray, 2px 2px 0px lightgray, 3px 3px 0px lightgray;
}

#userMenu {
    width: 670px;
    height: 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    position:relative;
    text-align: center;

}

#searchBar {
    width: 490px;    
    position: absolute;
    bottom: 0;
    right: 0;
}

#searchBarOnContentPage {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
}

.searchFormTxtBox {  
    float:left;
    width: calc(100% - 180px);
    height: 40px;
    background-color: rgba(255, 255, 255, 0.7);
    padding-left: 15px;
    padding-right: 15px;
    border: 0;
    margin-right: 0;

    font-family: 'Open Sans Condensed';
    font-size: 18px;
    color: black;
    font-weight: lighter;

    
    box-sizing: border-box;  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
}

#searchBarOnContentPage .searchFormTxtBox {
	width: calc(100% - 70px);
}

#searchBar .searchFormSelect {
    float:left;
    border: 0;
    border-left: solid lightgray 1px;
    margin: 0;
    height: 40px;
    width: 110px;
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Open Sans Condensed';
    font-size: 15px;
    box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
}

#PresentationBoxWithFloatingHeader {
    width: 60%;
    margin: 0 auto;
    max-width: 1100px;
    padding-bottom: 50px;
    padding-top: 70px;
}
#PresentationBoxWithFloatingHeader h1, h2 {
    color: darkgray;
    font-family: 'Open Sans Condensed';
    font-weight: lighter;
}

#PresentationBox {
    width: 60%;
    margin: 0 auto;
    max-width: 1100px;
    padding-bottom: 50px;
}

#PresentationBox h1, h2 {
    color: darkgray;
    font-family: 'Open Sans Condensed';
    font-weight: lighter;
}

#PresentationBox h1 {
    font-size: 2.6em;
}


.sideMargins10 {
	margin-left: 10px;
	margin-right: 10px;
}



/*TEXT*/
.smallCenterText {
	text-align: center;
	font-family: 'Open Sans Condensed';
	font-size: 18px;
	color: darkgray;
}

label {
    font-family: 'Open Sans Condensed';
    font-size: 20px;
    color: darkgray;
    font-weight: lighter;
}

.centeredHeaderText {
	text-align: center;
	font-size: 50px;
    line-height: 20px;

    color: #526e83;
    text-shadow: 1px 1px 0px lightgray, 2px 2px 0px lightgray, 3px 3px 0px lightgray;    
    /*text-shadow: 1px 1px 0px #dc7676, 2px 2px 0px #dc7676;*/
}

.field-validation-error {
    font-family: 'Open Sans Condensed';
    font-size: 17px;
    color: darkgray;
}

#PresentationTitle {
    font-size: 3em;
    margin-bottom: 5px;
}

/*FORMTABLE*/
.formTable {
	color: white;
	text-align: right;
	font-family: 'Open Sans Condensed';
	font-weight: lighter;
	font-size: 18px;
	border-spacing: 0 5px;
	width: 100% !Important;
	padding-bottom: 30px;
    min-width: 350px;
    max-width: 1100px;
}

.formTable tr td:first-child {
	padding-right: 20px;
	width: 140px;
}

.formTable .generalTxtBox,
.formTable .registerDropDownList {
	margin-bottom: 0;
}

.formTable label {
    float: left;
}


/*ELEMENTS AND MISC*/
#pdfDiv {
    float:right;
}
#importDescription {
    font-family: 'Open Sans Condensed';
	font-size: 18px;
    font-weight: lighter;
}

#downloadBtnsDiv {
    text-align:center;
    font-family: 'Open Sans Condensed';
	font-size: 17px;
    color: black;
    font-weight: lighter;
}

.generalTextDiv {
    text-align:center;
    font-family: 'Open Sans Condensed';
	font-size: 17px;
    color: black;
    font-weight: lighter;
}

#downloadBtnsDiv > span {
    line-height: 50px;
}

.blueDivButton > a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px 0px 0px 0px;
}
.redDivButton > a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px 0px 0px 0px;
}
.blueDivButton {
    display:inline-block;
    border: 0;
    height: 30px;
    width: 120px;
    background-color: #4bc6d9;
    font-family: 'Open Sans Condensed';
	font-size: 16px;
    color: white;
    font-weight: lighter;
    cursor: pointer;
    margin-left: 10px;
    box-shadow: 1px 1px 0px 0px #43b1c3, 2px 2px 0px 0px #43b1c3, 3px 3px 0px 0px #43b1c3;
}

.redDivButton {
    display:inline-block;
    border: 0;
    height: 30px;
    width: 135px;
    font-family: 'Open Sans Condensed';
	font-size: 16px;
    color: white;
    font-weight: lighter;
    cursor: pointer;
    margin-left: 10px;
    background-color: #fe8989;
    box-shadow: 1px 1px 0px 0px #d47878, 2px 2px 0px 0px #d47878, 3px 3px 0px 0px #d47878;
}

.selectElement {
    float: left;
    border: 0;
    margin: 0;
    height: 40px;
    width: 110px;
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Open Sans Condensed';
    font-size: 15px;
    box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
}

.generalSelectElement {
    border: 0;
    margin: 0;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Open Sans Condensed';
    font-size: 15px;
    box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
}
.importSuggestionBtn {
    border: 0;
    height: 40px;
    min-width: 70px;
    background-color: #4bd9bf;
    font-family: 'Open Sans Condensed';
    font-size: 18px;
    color: white;
    font-weight: lighter;
    cursor: pointer;

    box-shadow: 1px 1px 0px 0px #43c3ac, 2px 2px 0px 0px #43c3ac, 3px 3px 0px 0px #43c3ac;
    margin-bottom: 10px;
}
.uploadDiv {
    position: relative;
    text-align: center;
}
.inputButton { 
	font-family: 'Open Sans Condensed';
	font-weight: lighter;
	font-size: 20px;
    padding: 5px 15px 5px 15px;
    background-color: #4bd9bf;
    color: white;
    border: 0;
    cursor: pointer;
    box-shadow: 1px 1px 0px 0px #43c3ac, 2px 2px 0px 0px #43c3ac, 3px 3px 0px 0px #43c3ac;
}
#uploadCSV {    
    display: none;
}

.back-top {
    width:50px;
    height:50px;
    background: #4bd9bf;
    position:fixed;
    bottom:70px;
    right:20px;
    display:none;
    cursor: pointer;
    box-shadow: 1px 1px 0px 0px #43c3ac, 2px 2px 0px 0px #43c3ac, 3px 3px 0px 0px #43c3ac;
}
.topArrow{ 
   width: 0; 
   height: 0; 
   margin: auto;
   margin-top: 5px;
   border-bottom: 35px solid white; 
   border-left: 20px solid transparent; 
   border-right: 20px solid transparent;
}

#appControllerDiv {
    font-family: 'Open Sans Condensed';
	font-weight: lighter;
}

#appControllerDiv > #listHeader {
    /*font-weight:bold;*/ 
    font-size: 1.5em;
    padding: 15px;
    margin-bottom: 25px;
    clear: both;
}

.appControllerDivISBN {
    float:left; 
    min-height: 1em; 
    width:10%;
}
.appControllerDivTitle {
    float:left; 
    min-height: 1em; 
    width:40%;
}
.appControllerDivAuthors {
    float:left; 
    min-height: 1em; 
    width:40%;
}
.appControllerDivDoeID {
    float:left; 
    min-height: 1em; 
    width:10%;
}
.appControllerTable {
    width: 99%;
    margin: 0 auto;     
}
.appControllerTable thead tr th, .appControllerTable tbody tr td {    
    font-weight: lighter;
    font-size: 18px;
}
.appControllerTable tbody tr:last-child td {
    text-align: center;
}

.appControllerTableDiv {
    width: calc(100% - 4px);
    margin-bottom: 3px;
    /*box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;*/
    border-right: 3px solid lightgray !important;
    border-bottom: 3px solid lightgray !important;
    border-top: 1px solid lightgray !important;
    border-left: 1px solid lightgray !important;   
}
input[type=text]:disabled {
    background: #efefef !important;
}
.appControllerCheckBox{
    width: 20px;
    height: 20px;
    margin-top: 0px;
    margin-left: -4px;
}
.appControllerTxtBox{

    margin-bottom: 2px;
    width: 98%;
    height: 25px;
    background-color: white;
    padding-left: 15px;
    padding-right: 15px;
    border: 0;

    font-family: 'Open Sans Condensed';
    font-size: 16px;
    color: black;
    font-weight: lighter;
    
    box-sizing: border-box;  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

    box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
}

#appControllerCheckboxes {
    float: left;
    padding-top: 10px;
    font-family: 'Open Sans Condensed';
    font-size: 16px;
    color: black;
    font-weight: lighter;
}

#appControllerCheckboxes input{
    margin-right: 15px;
    padding: 0;
    height: 15px;
    width: 15px;
}

.greenBox {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #4bd971;
    box-shadow: 1px 1px 0px 0px #43c369, 2px 2px 0px 0px #43c369, 3px 3px 0px 0px #43c369;
    border-top: 1px solid #43c3ac !important;
    border-left: 1px solid #43c3ac !important;
    border-right: 1px solid #4bd971 !important;
    border-bottom: 1px solid #4bd971 !important;
}

.blueBox {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #4bc6d9;
    box-shadow: 1px 1px 0px 0px #43b1c3, 2px 2px 0px 0px #43b1c3, 3px 3px 0px 0px #43b1c3;
    border-top: 1px solid #43b1c3 !important;
    border-left: 1px solid #43b1c3 !important;
    border-right: 1px solid #4bc6d9 !important;
    border-bottom: 1px solid #4bc6d9 !important;
}

.yellowBox {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #ffec94;
    box-shadow: 1px 1px 0px 0px #e4daa8, 2px 2px 0px 0px #e4daa8, 3px 3px 0px 0px #e4daa8;
    border-top: 1px solid #e4daa8 !important;
    border-left: 1px solid #e4daa8 !important;
    border-right: 1px solid #ffec94 !important;
    border-bottom: 1px solid #ffec94 !important;
}

.redBox {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fe8989;
    box-shadow: 1px 1px 0px 0px #d47878, 2px 2px 0px 0px #d47878, 3px 3px 0px 0px #d47878;
    border-top: 1px solid #d47878 !important;
    border-left: 1px solid #d47878 !important;
    border-right: 1px solid #fe8989 !important;
    border-bottom: 1px solid #fe8989 !important;
}


.grayDiv{
    background-color: white;
    padding: 15px;
    clear: both; 
    margin-right: 3px;
    margin-bottom: 3px;
    overflow:auto;

    box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
    border-top: 1px solid lightgray !important;
    border-left: 1px solid lightgray !important;
    border-right: 1px solid white !important;
    border-bottom: 1px solid white !important;
}
.greenDiv {
    pointer-events: none;
    padding: 15px;
    clear: both; 
    margin-right: 3px;
    margin-bottom: 3px;
    overflow:auto;

    background-color: #4bd971;
    box-shadow: 1px 1px 0px 0px #43c369, 2px 2px 0px 0px #43c369, 3px 3px 0px 0px #43c369;
    border-top: 1px solid #43c3ac !important;
    border-left: 1px solid #43c3ac !important;
    border-right: 1px solid #4bd971 !important;
    border-bottom: 1px solid #4bd971 !important;
}
.redDiv {
    background-color: #fe8989;
    padding: 15px;
    clear: both; 
    margin-right: 3px;
    margin-bottom: 3px;
    overflow:auto;
    
    cursor:pointer;
    box-shadow: 1px 1px 0px 0px #d47878, 2px 2px 0px 0px #d47878, 3px 3px 0px 0px #d47878;
    border-top: 1px solid #d47878 !important;
    border-left: 1px solid #d47878 !important;
    border-right: 1px solid #fe8989 !important;
    border-bottom: 1px solid #fe8989 !important;

}
.yellowDiv {
    background-color: #ffec94;
    padding: 15px;
    clear: both; 
    margin-right: 3px;
    margin-bottom: 3px;
    overflow:auto;
    cursor:pointer;
    box-shadow: 1px 1px 0px 0px #e4daa8, 2px 2px 0px 0px #e4daa8, 3px 3px 0px 0px #e4daa8;
    border-top: 1px solid #e4daa8 !important;
    border-left: 1px solid #e4daa8 !important;
    border-right: 1px solid #ffec94 !important;
    border-bottom: 1px solid #ffec94 !important;
}
.blueDiv {
    pointer-events: none;
    background-color: #4bc6d9;
    padding: 15px;
    clear: both; 
    margin-right: 3px;
    margin-bottom: 3px;
    overflow:auto;

    box-shadow: 1px 1px 0px 0px #43b1c3, 2px 2px 0px 0px #43b1c3, 3px 3px 0px 0px #43b1c3;
    border-top: 1px solid #43b1c3 !important;
    border-left: 1px solid #43b1c3 !important;
    border-right: 1px solid #4bc6d9 !important;
    border-bottom: 1px solid #4bc6d9 !important;
}

.ui-progressbar{
    position: relative;
}
.ui-progressbar .ui-progressbar-value {
    margin: 0 !important;
}
 .progress-label {
    width: 80px;
    position: absolute;
    left: calc(50% - 40px);
    text-align: center;
    top: 4px;
    color: black;
    font-family: 'Open Sans Condensed';
    font-size: 16px;
    font-weight: lighter;
  }

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
     border-radius: 0 !important;
 }
.ui-widget-content {
    background: #ffffff;
    border: 0 !important;
    
    box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray !important;
    border-top: 1px solid lightgray !important;
    border-left: 1px solid lightgray !important;
}
.ui-progressbar .ui-widget-header {
    background: #4bd9bf;
    border: 0 !important;
  }

.registerDropDownList {
    border: 0;
    margin: 0 0 10px 0;
    padding-left: 10px;
    height: 40px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    font-family: 'Open Sans Condensed';
    font-size: 17px;

    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
    box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
}

.generalTxtBox {
    margin-bottom: 10px;
    width: 100%;
    height: 40px;
    background-color: white;
    padding-left: 15px;
    padding-right: 15px;
    border: 0;

    font-family: 'Open Sans Condensed';
    font-size: 18px;
    color: black;
    font-weight: lighter;
    
    box-sizing: border-box;  
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

    box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
    border-top: 1px solid lightgray;
    border-left: 1px solid lightgray;
}

.generalBtn {
    float: right;
    margin-right: 0;
    border: 0;
    height: 40px;
    min-width: 70px;
    background-color: #4bd9bf;
    font-family: 'Open Sans Condensed';
    font-size: 18px;
    color: white;
    font-weight: lighter;
    cursor: pointer;

    /*box-shadow: 1px 1px 0px 0px #dc7676, 2px 2px 0px 0px #dc7676, 3px 3px 0px 0px #dc7676;*/
    box-shadow: 1px 1px 0px 0px #43c3ac, 2px 2px 0px 0px #43c3ac, 3px 3px 0px 0px #43c3ac;
    margin-bottom: 10px;
}

.buttonATag {
	line-height: 40px;
	text-align: center;
}

div .success,
div .error {
	border: none;
	border-bottom: 1px solid;
	width: 700px;
	margin: auto;
	text-align: center;
	font-size: 2.1em;
	margin-bottom: 20px;
}

div .success p,
div .error p {
	margin-bottom: 15px;
}

div .success {
    /*color: #47fe24;*/ /*green*/
    color: #4bd9bf;
}

div .error {
    /*color: #d02121;*/ /*red*/
    color: #526e83;
}

div .success span,
div .error span {
    font-size: 14pt;
    font-weight: bold;
	display: none;
}


/*BORDERS*/
.GrayBorder {
    box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
}

.BlueBorder {    
    border-bottom: 1px solid #6c7982;
    box-shadow: 1px 1px 0px 0px #3e5363, 2px 2px 0px 0px #3e5363, 3px 3px 0px 0px #3e5363;
}

.GreenBorder {
    box-shadow: 1px 1px 0px 0px #43c3ac, 2px 2px 0px 0px #43c3ac, 3px 3px 0px 0px #43c3ac;
}

.PeachBorder {    
    /*border-bottom: 1px solid #ffb3b3;*/
    box-shadow: 1px 1px 0px 0px #dc7676, 2px 2px 0px 0px #dc7676, 3px 3px 0px 0px #dc7676;
}


/*ANGULAR TABLE*/
.AngularTable 
{
   text-align:left;
   font-family: 'Open Sans Condensed';
   font-weight: lighter;
   font-size: 16px;
   border-spacing: 0px 0px;
   width: 100% !Important;
   padding-bottom: 30px;
}

#AngularTables h2 {
    /*height: 20px;*/
    line-height: 0px;
    font-size: 1.8em;
    /*display:inline-block;*/
    /*margin-bottom: -20px;*/
}
.AngularTable tbody tr {
    height: 40px;
}

.AngularTable tbody td{    
    border-bottom: 1px solid lightgray;
}

.AngularTable tbody th {
    border-bottom: 1px solid #43c3ac;
}

.AngularTable tbody th {
    background-color: #4bd9bf;
    color: white;
}
.AngularTable tbody td, .AngularTable a {
    background-color: white;
    color: black !important;
}

@-moz-document url-prefix() { 
    .AngularTable tbody, .AngularTable thead {        
          box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
     .AngularTable tbody th, .AngularTable tbody td, .AngularTable thead th{
          box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
    }
}

.AngularTable th
{    
    font-family: 'Open Sans Condensed';
    font-size: 1.2em;
    font-weight: lighter;
    font-style: italic;
}

.AngularTable th:first-child
{    
    padding-left: 15px;
}

.AngularTable td{
    
    padding-left: 15px;
}

.DataPresentationtable thead tr th {
          border-bottom: 3px solid lightgray;
          cursor: default;
}



/*DATAPRESENTATION TABLE*/

.DataPresentationtable 
{
   text-align:left;
   font-family: 'Open Sans Condensed';
   font-weight: lighter;
   font-size: 16px;
   border-spacing: 0px 0px;
   width: 100% !Important;
   padding-bottom: 30px;
}

@-moz-document url-prefix() { 
    .DataPresentationtable tbody, .DataPresentationtable thead {        
          box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
     .DataPresentationtable tbody th, .DataPresentationtable tbody td, .DataPresentationtable thead th{
          box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
    }     
}

.DataPresentationtable tr:nth-child(odd)
{
    background-color: white; 
    height: 40px;   
}

.DataPresentationtable tr:nth-child(odd) a
{
    color:black;   
}

.DataPresentationtable tr:nth-child(even)
{
    background-color: #4bd9bf;
    color:white;
    height: 40px;  
}

.DataPresentationtable td:first-child {    
   padding-left: 15px;
}
.DataPresentationtable td {    
   padding-right: 10px;
}

.DataPresentationtable th
{    
    font-family: 'Open Sans Condensed';
    font-size: 1.2em;
    font-weight: lighter;
    font-style: italic;
    cursor: pointer;
}

.DataPresentationtable th:first-child
{    
    padding-left: 15px;
}

.dataTables_info {
    float: left;
}

.dataTables_length {
    padding-bottom: 5px;
}

.dataTables_length select {
    font-family: 'Open Sans Condensed';    
    font-weight: lighter;
    font-size: 0.8em;
    background-color: rgba(255, 255, 255, 0.7); 
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: darkgray;
    font-family: 'Open Sans Condensed';
    font-size: 1.2em;
    font-weight: lighter;
}

.dataTables_paginate {
    float:right;
    padding: 0;
    
    box-shadow: 1px 1px 0px 0px lightgray, 2px 2px 0px 0px lightgray, 3px 3px 0px 0px lightgray;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 0.5em 1em;
    margin-left: 2px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: black;
    background-color: white     
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #526e83;
    color: white;
}

.dataTables_wrapper:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 50px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: white !important;
    background-color: #4bd9bf;
}

.DataPresentationtable tr:nth-child(odd) .checkInOutBtn
{
    float: right;
    margin-right: 0;
    border: 0;
    height: 40px;
    min-width: 80px;
    background-color: transparent;
    font-family: 'Open Sans Condensed';
    font-size: 22px;
    color: #4bd9bf;
    font-weight: lighter;  
    font-style: italic;
    border-left: 1px solid #4bd9bf;
}

.DataPresentationtable tr:nth-child(even) .checkInOutBtn
{
    float: right;
    margin-right: 0;
    border: 0;
    height: 40px;
    min-width: 80px;
    background-color: transparent;
    font-family: 'Open Sans Condensed';
    font-size: 22px;
    color:white;
    font-weight: lighter;   
    font-style: italic;
    border-left: 1px solid white;
}

.checkInOutBtn:hover {
    cursor: pointer;
}

.DataPresentationtable tr:nth-child(odd) a:hover
{
    color: #4bd9bf;
}

.DataPresentationtable tr:nth-child(even) a:hover
{
    color: #526e83;
}



/*NOTIFICATION ANIMATION*/
.notificationAlert {
    -webkit-animation: pulse 15s infinite alternate;
    animation: pulse 15s infinite alternate;
    -moz-animation: pulse 15s infinite alternate;
}
@-webkit-keyframes pulse { 0% {color: #45CEEF;} 25% {color: #f7ebaf;} 50% {color: #FFD4DA;} 75% {color: #99D2E4;} 100% {color: #D8CAB4;} }
@-moz-keyframes pulse { 0% {color: #45CEEF;} 25% {color: #f7ebaf;} 50% {color: #FFD4DA;} 75% {color: #99D2E4;} 100% {color: #D8CAB4;} }
@keyframes pulse { 0% {color: #45CEEF;} 25% {color: #f7ebaf;} 50% {color: #FFD4DA;} 75% {color: #99D2E4;} 100% {color: #D8CAB4;} }


/*AUTOCOMPLETE*/
.ui-autocomplete {
    background-color: white;
    font-family: 'Open Sans Condensed';
    font-size: 16px;
    color:black;
    font-weight: lighter;
    list-style-type: none;
    border: 1px solid lightgray;

    z-index: 5000 !important; /*so it can be used in bootstrap modals*/
}

.ui-autocomplete .ui-menu-item:hover {
   background-color: #4bd9bf;
   color: white;
}
   

/*NAV MENU*/
.nav {
	padding: 0px;
	list-style: none;
    position: relative;
    max-width: 670px;
    margin: 0 auto;
    display: table;
}

.nav > li {
	float: left;
	width: 130px;
	position: relative;
    float:left;
    background-color: #526e83;
    line-height: 35px;    
	border-left: 1px solid rgba(255,255,255,0.1);
}

.nav > li:first-child {
    border: 0;
}

.nav li a {
	display: block;
	padding: 7px 8px;
	text-decoration: none;
}

.nav li:hover > a {
	background-color: #4bd9bf;
}


/*SUBMENU*/

.nav ul {
	display: none;
	position: absolute;
	margin-left: 0px;
	list-style: none;
	padding: 0px;
	background-color: #4bd9bf;
}

.nav ul li {
	width: 130px;
	float: left;    
}

.nav ul a {
	display: block;
	text-decoration: none;
}

.nav ul li a:hover {
	background-color: #67f1d8;
    color: #526e83;
}


/*RESPONSIVE DESIGN*/
@media only screen and (max-width: 1280px) {
    
    .formDesignDiv {
        width: 70%;
    }
}

@media only screen and (max-width: 900px) {
    #PresentationBox {
        width: 80%;
    }

    #PresentationBoxWithFloatingHeader {
        width: 80%;
    }
    .formDesignDiv {
        width: 80%;
    }
}
@media only screen and (max-width: 770px) {
      

    #layoutHeader #section1 {
    width: 100%;
    height: inherit;
    margin: 30px auto;
    position:relative;
}

    #layoutHeader #section1 h1 {
        font-size: 0px;
    }

    .floatingHeader {
        height: 60px;
        top: 120px;
    }

    .floatingHeader > h1 {
        font-size: 1.5em !important;
    }

    #PresentationBoxWithFloatingHeader {
        padding-top: 30px;
    }

    #searchBar {
        width: 70%;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-top: 5px;
    }

    #userMenu {
        width: auto;
        margin-top: -120px;
    }
    .nav > li {
        width: 100px !important;
        height: 40px !important;
        line-height: 26px;
        font-size: 14px;
    }

    .nav ul li {
        width:100px !important;
        font-size: 14px;
    }
}